<template>
    <div class="main">
        <div class="login">
            <img src="@/assets/imgs/logo-s.png" alt="" />
            <div class="title">新能源数据后台</div>
            <div class="input">
                <el-form :model="formData" label-width="0px" :rules="rules"  ref="ruleFormRef">
                    <el-form-item label="" prop="account">
                        <el-input v-model="formData.account">
                            <template #suffix>
                                <el-icon class="el-input__icon">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="formData.password" type="password">
                            <template #suffix>
                                <el-icon class="el-input__icon">
                                    <Key />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="loginBtn" @click="submitForm(ruleFormRef)" type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { useRouter } from 'vue-router';
import { setToken , setUserInfo} from "@/utils"
import apis from "@/api";

import type { FormInstance, FormRules } from 'element-plus'

const { login } = apis
const router=useRouter()
const message = getCurrentInstance()?.appContext.config.globalProperties.$ElMessage
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    account: [
        { required: true, message: "请输入账号", trigger: "blur" },
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
    ],
})
let formData = reactive({ account: "", password: "" });

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            login(formData).then((res:any)=>{
                message.success('登录成功')
                setToken(res.token)
                setUserInfo(res)
                router.push('/home/userOverview')
            })
        } else {
            message.warning('请确认账号密码信息')
        }
    })
}



</script>

<style scoped lang="less">
.main {
    background: url("@/assets/imgs/login-gif.gif") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    .login {
        width: 400px;
        height: auto;
        border: none;
        padding: 10px;
        text-align: center;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.5);

        img {
            width: 50px;
            height: 60px;
        }

        .title {
            font-size: 26px;
            background-image: linear-gradient(to right, #9bc93c, #4e4e4e);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            height: 60px;
            line-height: 60px;
        }

        .input {
            width: 360px;
            height: auto;
            padding: 20px;

            .loginBtn {
                width: 100%;
            }
        }
    }
}

/deep/ .el-input__suffix {
    position: absolute;
    left: 0;
}

/deep/ .el-input__inner {
    padding-left: 15px;
}
</style>